<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>促销图示</title>
</head>

<body>
    <div class="tupian one"><img src="./images/哈根达斯.jpg" alt="">
    </div>
    <div class="tupian two"><img src="./images/黑衣.jpg" alt=""></div>
    <style>
        .tupian {
            width: 450px;
        }

        .tupian img {
            width: 100%;
        }

        .one {
            position: relative;
        }

        .one::before {
            content: url(./images/促销标志-左上.png);
            position: absolute;
        }

        .one::after {
            content: url(./images/促销标志-右下.png);
            position: relative;
            left: 391px;
            top: -58px;
        }

        .two {
            position: relative;
        }

        .two::before {
            content: url(./images/促销标志-左上.png);
            position: absolute;
        }

        .two::after {
            content: url(./images/促销标志-右下.png);
            position: relative;
            left: 391px;
            top: -54px;
        }
    </style>
</body>

</html>